import React from "react";
import styles from "./main.module.css";
import { Form, Input, Button, Checkbox, Row, Col } from "antd";
import { UserOutlined, LockOutlined, EditOutlined } from "@ant-design/icons";
import { Store } from "antd/lib/form/interface";
import myHttp from "../../utils/myHttp";
import UserInfoModel, { urls, CaptchaModel } from "../../models/userInfo";
import { UserInfoStore } from "../../stores/UserInfo.store";
import { inject } from "mobx-react";
import { RouteComponentProps } from "react-router-dom";
import { proxyHOST } from "../../utils/HOST";

export interface loginState {
  msg: string;
  captchaInfo: CaptchaModel | undefined;
}

export interface loginProps extends RouteComponentProps {
  name?: string;
  userInfoStore?: UserInfoStore;
}

@inject("userInfoStore")
export default class Login extends React.Component<loginProps, loginState> {
  state: loginState = { msg: "登录", captchaInfo: undefined };

  static defaultProps = {
    //设置props默认值方法
    name: "rdj",
  };
  // constructor(props: loginProps) {
  //   super(props);
  // }

  render() {
    return (
      <div className={styles.Login}>
        <div className={styles.content}>
          <h1>xxx系统</h1>
          <Form
            name="normal_login"
            className={styles["login-form"]}
            initialValues={{ remember: true }}
            onFinish={this.onFinish.bind(this)}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: "请填写你的账号!" }]}
            >
              <Input
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="请填写你的账号"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: "请输您的密码!" }]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="请输您的密码"
                placeholder="Password"
              />
            </Form.Item>
            <Form.Item>
              <Row justify={"space-between"}>
                <Col span={18}>
                  <Form.Item
                    name="captcha"
                    noStyle
                    rules={[{ required: true, message: "请填写验证码" }]}
                  >
                    <Input
                      prefix={<EditOutlined className="site-form-item-icon" />}
                      placeholder="请填写验证码"
                    />
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <div className={styles.captcha} onClick={this.getCaptcha.bind(this)}>
                    {" "}
                    {this.state.captchaInfo && this.state.captchaInfo.data ? (
                      <div
                      className={styles.captcha} 
                        dangerouslySetInnerHTML={{
                          __html: this.state.captchaInfo.data,
                        }}
                      ></div>
                    ) : (
                      "获取验证码"
                    )}
                  </div>
                </Col>
              </Row>
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住密码</Checkbox>
              </Form.Item>
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className={styles["login-form-button"]}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
  getCaptcha() {
    // 获取验证码
    myHttp.get(urls.GETCORE, CaptchaModel, undefined, proxyHOST).then((rep) => {
      if (rep.data) {
        let CaptchaInfo = rep.data;
        this.setState({ captchaInfo: CaptchaInfo });
        console.log("====================================");
        console.log("验证信息", CaptchaInfo);
        console.log("====================================");
      }
    });
  }

  onFinish(values: Store) {
    // 验证通过成功
    let userInfoStore = this.props.userInfoStore as UserInfoStore;
    console.log("values", values);
    myHttp.post(urls.LOGIN, UserInfoModel, values,proxyHOST).then((rep) => {
      if (rep.data) {
        let userInfo = rep.data;
        userInfoStore.setUserInfo(userInfo);
        myHttp.setToken()
        this.props.history.push("/home");
      }
    });

    console.log("this", this);
  }
}
